<template>
  <div class="img-show">
    <img :src="item" v-for="(item, index) in imgUrls" :key="item" @click="preview(index)" />
  </div>
</template>

<script setup>
import { computed, toRefs } from 'vue'
import { showImagePreview } from 'vant'
const props = defineProps({
  keys: {
    required: true, // 是否必传
    type: String // 类型
  }
})
const { keys } = toRefs(props)
const imgUrls = computed(() => {
  if (keys.value) {
    return keys.value
      .split(',')
      .filter((key) => key)
      .map((key) => import.meta.env.VITE_FILE_DOMAIN + key)
  } else {
    return []
  }
})
function preview(index) {
  showImagePreview({
    images: imgUrls.value,
    closeable: true,
    startPosition: index
  })
}
</script>

<style lang="scss" scope>
.img-show {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  img {
    width: 80px;
    height: 80px;
    border-radius: 7.5px;
    margin-right: 5px;
    margin-bottom: 5px;
  }
}
</style>
